import React, { memo } from 'react'

import { 
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight
} from './style'

import WYTopBanner from './c-cpns/top-banner'
import WYHotRecommend from './c-cpns/hot-recommend'
import WYNewAlbum from './c-cpns/new-album'
import WYRecommendRanking from './c-cpns/recommend-ranking'

import WYHotAnchor from './c-cpns/hot-anchor'
import WYSettleSinger from './c-cpns/settle-singer'
import WYUserLogin from './c-cpns/user-login'

function WYRecommend(props) {
  
    return (
        <RecommendWrapper>
          <WYTopBanner />
          <Content className='wrap-v2'>
            <RecommendLeft>
              <WYHotRecommend/>
              <WYNewAlbum/>
              <WYRecommendRanking/>
            </RecommendLeft>
            <RecommendRight>
              <WYUserLogin/>
              <WYSettleSinger/>
              <WYHotAnchor/>
            </RecommendRight>
          </Content>
        </RecommendWrapper>
    )
}



export default memo(WYRecommend)



// redux的connect做法
// function WYRecommend(props) {
//   // 发送网络请求
//   const { getBanners, topBanners } = props
//   useEffect(() => {
//     getBanners()
//   }, [getBanners])

//     return (
//         <div>
//           <h1>WYRecommend{topBanners.length}</h1> 
//         </div>
//     )
// }

// const mapStateToProps = state => ({
//   topBanners: state.recommend.topBanners
// })

// const mapDispatchToProps = dispatch => ({
//   getBanners: () => {
//     dispatch( getTopBannersAction())
//   }
// })

// export default connect(mapStateToProps, mapDispatchToProps)(memo(WYRecommend))